<template>
    <div>
        <!-- <AddDemandSz />
        <EditDemandSz /> -->
        <!-- <AddDemandMultiSz ref="add_demands" @getDataList="getDataList" @getDataCount="getDataCount" /> -->
        <!-- <EditDemandMultiSz ref="edit_demands" :queryInfo="queryInfo" @getDataList="getDataList" @getDataCount="getDataCount" /> -->

        <AddDemandMulti3 ref="add_demands" @getDataList="getDataList" @getDataCount="getDataCount" @getStatistics="getStatistics" />
        <EditDemandMulti3 ref="edit_demands" :queryInfo="queryInfo" @getDataList="getDataList" @getDataCount="getDataCount" @getStatistics="getStatistics" />
        <EditProInfo ref="edit_pro" :queryInfo="queryInfo" @getDataList="getDataList" @getDataCount="getDataCount" @getStatistics="getStatistics" />
        <ViewMember ref="view_member" />
        <ExportTask ref="task_ref" />

        <div class="com_box">
            <div class="sch_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="sch_tab active">需求汇集</div>
                    <div class="sch_tab" @click="switchTab('/videoszlistv2')">视频</div>
                    <div class="sch_tab" @click="switchTab('/pictureszlistv2')">图片</div>
                </div>
                <div class="flexbox flexcenter">
                    <el-date-picker size="small" v-model="yearData" @change="getDatas()" style="width:220px" :clearable='false' type="week" :picker-options="{firstDayOfWeek:1}" format="yyyy 年 MM 月 第 WW 周" placeholder="选择周">
                    </el-date-picker>
                    <el-button plain size="small" class="plain_blue" @click="openFile" :disabled="open_loadding" style="margin-left:12px">
                        <div class="flexbox flexcenter flexjust">
                            <svg xmlns="http://www.w3.org/2000/svg" stroke='#4475FF' class="stroke_svg btn_svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M7.33329 9.50008H8.33329C10.0822 9.50008 11.5 8.08232 11.5 6.33341C11.5 4.58451 10.0822 3.16675 8.33329 3.16675H5.99996C4.43515 3.16675 3.16663 4.43527 3.16663 6.00008V6.83341" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M8.66667 6.5H7.66667C5.91776 6.5 4.5 7.91777 4.5 9.66667C4.5 11.4156 5.91776 12.8333 7.66667 12.8333H10C11.5648 12.8333 12.8333 11.5648 12.8333 10V9.16667" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            打开需求文档
                        </div>
                    </el-button>
                    <el-button plain size="small" class="plain_blue" @click="excelDemands" :disabled="excel_loadding" style="margin-left:12px">
                        <div class="flexbox flexcenter flexjust">
                            <svg xmlns="http://www.w3.org/2000/svg" stroke='#4475FF' class="stroke_svg btn_svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                <path d="M1.75 6.56241V11.81H12.25V6.55999" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M9.625 6.7085L7 9.3335L4.375 6.7085" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M6.99756 1.75V9.33333" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            导入需求
                        </div>
                    </el-button>
                    <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left:12px" @click="addDemandSz" :disabled="distribution==1">添加项目</el-button>
                </div>
            </div>
            <DemandsCount :countQuery="countQuery" ref="demands_count" @selectGroupAll="selectGroupAll" v-loading="loading2" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
        </div>
        <div class="com_box" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_box">
                <div class="flexbox flexcenter flexbetween">
                    <el-radio-group v-model="queryInfo.group" size="small" @change="selectGroup">
                        <el-radio-button :label="1">1 组</el-radio-button>
                        <el-radio-button :label="2">2 组</el-radio-button>
                        <el-radio-button :label="3">3 组</el-radio-button>
                        <el-radio-button :label="4">4 组</el-radio-button>
                    </el-radio-group>
                    <div class="flexbox flexcenter">
                        <el-input style="width:216px;margin-right:12px" v-if="tableValue==1" clearable size="small" placeholder="品牌、产品" @change="getDataList(1)" suffix-icon="el-icon-search" v-model="queryInfo.query">
                        </el-input>
                        <el-button plain size="small" class="plain_blue" @click="viewMember">
                            <div class="flexbox flexcenter flexjust">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="#4475FF" class="stroke_svg btn_svg" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.8058 5.3513C12.1809 5.88929 12.4449 6.51056 12.5644 7.18181H14V8.81819H12.5644C12.4449 9.48944 12.1809 10.1107 11.8058 10.6487L12.8212 11.6641L11.6641 12.8212L10.6487 11.8058C10.1107 12.1809 9.48944 12.4449 8.81819 12.5644V14H7.18181V12.5644C6.51056 12.4449 5.88929 12.1809 5.3513 11.8058L4.33589 12.8212L3.17882 11.6641L4.1942 10.6487C3.81908 10.1107 3.55512 9.48944 3.4356 8.81819H2V7.18181H3.4356C3.55512 6.51056 3.81908 5.88929 4.1942 5.3513L3.17882 4.33589L4.33589 3.17882L5.3513 4.1942C5.88929 3.81908 6.51056 3.55512 7.18181 3.4356V2H8.81819V3.4356C9.48944 3.55512 10.1107 3.81908 10.6487 4.1942L11.6641 3.17882L12.8212 4.33589L11.8058 5.3513Z" fill="inherit" />
                                    <path d="M8 10C9.10456 10 10 9.10456 10 8C10 6.89544 9.10456 6 8 6C6.89544 6 6 6.89544 6 8C6 9.10456 6.89544 10 8 10Z" fill="inherit" stroke="white" stroke-width="1.66667" stroke-linejoin="round" />
                                </svg>
                                固定人员配置
                            </div>
                        </el-button>
                        <el-button plain size="small" class="plain_blue" @click="fenpeiScheduling" :disabled="distribution==1">
                            <div class="flexbox flexcenter flexjust">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="#4475FF" class="stroke_svg btn_svg" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.5321 10.0972L10.5851 10.0377C10.5776 10.031 10.5708 10.0271 10.5689 10.026C10.5673 10.0251 10.5659 10.0244 10.5647 10.0238C10.5638 10.0233 10.563 10.023 10.5625 10.0227C10.56 10.0216 10.5582 10.0209 10.5571 10.0206C10.5561 10.0202 10.5543 10.0196 10.5518 10.0191C10.5505 10.0188 10.5484 10.0183 10.5457 10.0179C10.5433 10.0175 10.5384 10.0169 10.5321 10.0169L10.5321 10.0972ZM10.5321 10.0972C10.532 10.0169 10.532 10.0169 10.5319 10.0169L10.5317 10.0169L10.5314 10.0169L10.5307 10.0169L10.5293 10.0169L10.5265 10.017L10.5211 10.0175C10.5202 10.0176 10.5194 10.0177 10.5186 10.0178V10.0931L10.5321 10.0972ZM10.5186 10.1124L10.5272 10.1027L10.5186 10.0932V10.1124ZM10.5186 10.1124C10.5203 10.1139 10.5287 10.1169 10.5321 10.1169V10.1124H10.5186ZM6.39147 12.2687V10.9962H7.71791C7.98604 10.9962 8.2221 10.8012 8.2221 10.5358C8.2221 10.2704 7.98604 10.0754 7.71791 10.0754H5.88729C5.61916 10.0754 5.3831 10.2704 5.3831 10.5358V12.0693L2.04094 9.08222L5.38141 6.09526V8.00106C5.38141 8.26648 5.61748 8.46145 5.8856 8.46145H9.60684V10.1063C9.60684 10.4512 9.83721 10.7493 10.179 10.8759C10.5204 11.0023 10.91 10.9334 11.1746 10.6975L11.1747 10.6974L14.8626 7.39866C15.0111 7.27911 15.1 7.10483 15.1 6.91838C15.1 6.73162 15.0108 6.55892 14.8626 6.4396L11.1747 3.14081L11.1746 3.14071C10.91 2.90482 10.5204 2.83597 10.179 2.9624C9.83721 3.08898 9.60684 3.38708 9.60684 3.73191V5.0044H8.2804C8.01228 5.0044 7.77622 5.19938 7.77622 5.4648C7.77622 5.73022 8.01228 5.92519 8.2804 5.92519H10.111C10.3792 5.92519 10.6152 5.73022 10.6152 5.4648V3.93134L13.9574 6.91843L10.6186 9.90673V8.00106C10.6186 7.87488 10.5631 7.75662 10.4672 7.67114C10.3718 7.58605 10.2449 7.54067 10.1144 7.54067H6.39316V5.89577C6.39316 5.55093 6.16279 5.25283 5.82096 5.12625C5.47955 4.99983 5.08998 5.06868 4.82542 5.30456L4.82532 5.30466L1.13745 8.60195C0.98891 8.7215 0.9 8.89578 0.9 9.08223C0.9 9.26921 0.989338 9.44171 1.13719 9.56229L4.82503 12.8595C4.82508 12.8596 4.82514 12.8596 4.82519 12.8597C5.0019 13.0189 5.2369 13.1 5.47131 13.1C5.58873 13.1 5.70667 13.0801 5.81938 13.0382C6.16115 12.9116 6.39147 12.6135 6.39147 12.2687ZM10.5186 9.99623V8.00106C10.5186 7.90495 10.4765 7.81335 10.4007 7.74578C10.3249 7.67821 10.2222 7.64067 10.1144 7.64067H6.39316L10.5186 9.99623Z" fill="inherit" stroke="inherit" stroke-width="0.2" />
                                </svg>
                                {{distribution==0?'分配需求':'已分配'}}
                            </div>
                        </el-button>
                    </div>
                </div>
                <div class="demands_content">
                    <div class="demands_l">
                        <DemandsTable :tableData="tableData" :distribution="distribution" :total="total" :queryInfo="queryInfo" @getDataList="getDataList" @editDemands="editDemands" @editProject="editProject" />
                    </div>
                    <div class="demands_r" v-loading="loading3" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <CountTable :statData="statData" :countInfo="countInfo" @getStatistics="getStatistics" />
                    </div>
                </div>
                <!-- <DemandsTable v-if="tableValue==1" :tableData="tableData" :total="total" :queryInfo="queryInfo" @getDataList="getDataList"  @editDemands="editDemands" @editProject="editProject" /> -->
                <!-- <CountTable v-else-if="tableValue==2" :statData="statData"/> -->
            </div>
        </div>
    </div>
</template>

<script>
// import AddDemandSz from "./AddDemandSz";
// import EditDemandSz from "./EditDemandSz";
// import AddDemandMultiSz from "./AddDemandMultiSz";
// import EditDemandMultiSz from "./EditDemandMultiSz";
import DemandsCount from "./components/DemandsCount";
import DemandsTable from "./components/DemandsTable";
import CountTable from "./components/CountTable";
import AddDemandMulti3 from "./components/AddDemandMulti3";
import EditDemandMulti3 from "./components/EditDemandMulti3";
import EditProInfo from "./components/EditProInfo";
import ViewMember from "./components/ViewMember";
import ExportTask from "./components/ExportTask";
export default {
    components: {
        // AddDemandSz,
        // EditDemandSz,
        // AddDemandMultiSz,
        // EditDemandMultiSz,
        DemandsCount,
        DemandsTable,
        CountTable,
        AddDemandMulti3,
        EditDemandMulti3,
        EditProInfo,
        ViewMember,
        ExportTask,
    },
    name: "",
    data() {
        return {
            tableValue: 1,
            distribution: 0,
            open_loadding: false,
            excel_loadding: false,
            queryInfo: {
                year: "",
                week: "",
                page: 1,
                limit: 20,
                query: "",
                group: 1,
            },
            countInfo: {
                type: 0,
            },
            countQuery: {
                group: 1,
            },
            loading: false,
            loading2: false,
            loading3: false,
            yearData: new Date(),
            total: 1,
            setpage: 1,
            tableData: [],
            statData: [],
            countData: {
                qc_vedio: "",
                qc_live: "",
                ud_vedio: "",
                jl_vedio: "",
                tex_vedio: "",
                tk_vedio: "",
                jyt_vedio: "",
                total: 0,
            },
        };
    },
    created() {
        let dayTime = this.$route.query.day
            ? JSON.parse(this.$route.query.day)
            : "";
        this.yearData = dayTime ? new Date(dayTime) : new Date();
        this.queryInfo.week = dayTime
            ? this.dayjs(new Date(dayTime)).week()
            : this.dayjs().week();
        // this.queryInfo.week = dayTime
        //     ? this.getYearWeek(new Date(dayTime))
        //     : this.getYearWeek(new Date());
        console.log(this.queryInfo.week);
        this.queryInfo.year = dayTime
            ? this.dateFormat("YYYY", new Date(dayTime))
            : this.dateFormat("YYYY", new Date());
        let group = JSON.parse(window.sessionStorage.getItem("group"));
        if (group) {
            this.queryInfo.group = group;
        }
        this.getDataList(1);
        this.getDataCount();
        this.getStatistics();
    },
    beforeDestroy() {
        window.sessionStorage.removeItem("group");
    },
    methods: {
        // 选择组
        selectGroup() {
            this.getDataList(1);
            this.getStatistics();
        },

        selectGroupAll() {
            this.getDataCount();
        },
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/Demandszv2/demandList_v2",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
                this.distribution = res.data.distribution;
                this.setSessionStorage();
            }
        },

        //获取汇总
        async getDataCount() {
            this.loading2 = true;
            this.countData = {};
            this.countData.total = 0;
            const { data: res } = await this.$http.post(
                "adminapi/Demandszv2/demandNum_v2",
                {
                    year: this.queryInfo.year,
                    week: this.queryInfo.week,
                    group: this.countQuery.group,
                }
            );
            if (res.code !== 200) {
                this.loading2 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading2 = false;
                for (let i in res.data) {
                    this.countData.total += Number(res.data[i].quantity);
                    if (
                        res.data[i].channel == 1 &&
                        res.data[i].business_scene == 5
                    ) {
                        this.countData.qc_vedio = res.data[i].quantity;
                    } else if (
                        res.data[i].channel == 1 &&
                        res.data[i].business_scene == 6
                    ) {
                        this.countData.qc_live = res.data[i].quantity;
                    } else if (
                        res.data[i].channel == 2 &&
                        res.data[i].business_scene == 5
                    ) {
                        this.countData.ud_vedio = res.data[i].quantity;
                    } else if (
                        res.data[i].channel == 3 &&
                        res.data[i].business_scene == 5
                    ) {
                        this.countData.jl_vedio = res.data[i].quantity;
                    } else if (
                        res.data[i].channel == 4 &&
                        res.data[i].business_scene == 5
                    ) {
                        this.countData.tex_vedio = res.data[i].quantity;
                    } else if (
                        res.data[i].channel == 5 &&
                        res.data[i].business_scene == 5
                    ) {
                        this.countData.tk_vedio = res.data[i].quantity;
                    } else if (
                        res.data[i].channel == 6 &&
                        res.data[i].business_scene == 5
                    ) {
                        this.countData.jyt_vedio = res.data[i].quantity;
                    }
                }
                this.$refs.demands_count.countData = this.countData;
            }
        },

        //获取人员统计
        async getStatistics() {
            this.loading3 = true;
            const { data: res } = await this.$http.post(
                "adminapi/Demandszv2/personWorkList",
                {
                    year: this.queryInfo.year,
                    week: this.queryInfo.week,
                    group: this.queryInfo.group,
                    ...this.countInfo,
                }
            );
            if (res.code !== 200) {
                this.loading3 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading3 = false;
                this.statData = res.data;
            }
        },

        // 打开需求文档
        async openFile() {
            this.open_loadding = true;
            const { data: res } = await this.$http.post(
                "adminapi/Demandszv2/demandProjectExportTemplate",
                {
                    year: this.queryInfo.year,
                    week: this.queryInfo.week,
                }
            );
            if (res.code !== 200) {
                this.open_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                if (res.data) {
                    window.open(res.data);
                }
                this.open_loadding = false;
            }
        },

        // 导入需求
        excelDemands() {
            this.$confirm("是否要导入当前已选周的需求", "导入需求", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.excel_loadding = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/Demandszv2/demandProjectAddFromExcel",
                        {
                            year: this.queryInfo.year,
                            week: this.queryInfo.week,
                        }
                    );
                    if (res.code !== 200) {
                        this.excel_loadding = false;
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.excel_loadding = false;
                        this.$message({
                            type: "success",
                            message: "导入完成",
                        });
                        this.$refs.task_ref.getData(res.data);
                        this.getDataList(1);
                    }
                })
                .catch(() => {});
        },

        // 分配需求
        fenpeiScheduling() {
            this.$confirm("确认要分配需求吗？分配后将无法修改", "分配需求", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/Demandszv2/distributeWork_v2",
                        {
                            year: this.queryInfo.year,
                            week: this.queryInfo.week,
                            group: this.queryInfo.group,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "分配成功",
                        });
                        this.getDataList(1);
                    }
                })
                .catch(() => {});
        },

        // 创建需求
        addDemandSz() {
            const attr = {
                week: this.queryInfo.week,
                year: this.queryInfo.year,
                group: this.queryInfo.group,
            };
            this.$refs.add_demands.getData(attr);
        },

        // 修改需求
        editDemands(row) {
            let attr = {
                ...row,
            };
            this.$refs.edit_demands.getData(attr);
        },

        editProject(row) {
            this.$refs.edit_pro.getData(row);
        },

        // 编辑人员配置
        viewMember() {
            this.$refs.view_member.getData();
        },

        getDatas() {
            // this.queryInfo.week = this.getYearWeek(new Date(this.yearData));
            this.queryInfo.week = this.dayjs(this.yearData).week();
            this.queryInfo.year = this.dateFormat(
                "YYYY",
                new Date(this.yearData)
            );
            this.getDataList(1);
            this.getDataCount();
            this.getStatistics();
        },

        getYearWeek(date) {
            date = this.dateFormat("YYYY-mm-dd", date); //将日期转换成yyyy-mm-dd格式
            date = new Date(date);
            let d = "";
            var date2 = new Date(date.getFullYear(), 0, 1);
            var day1 = date.getDay();
            if (day1 == 0) day1 = 7;
            var day2 = date2.getDay();
            if (day2 == 0) day2 = 7;
            d = Math.round(
                (date.getTime() -
                    date2.getTime() +
                    (day2 - day1) * (24 * 60 * 60 * 1000)) /
                    86400000
            );
            return Math.ceil(d / 7);
        },

        // 日期格式化
        dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString(), // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1
                            ? opt[k]
                            : opt[k].padStart(ret[1].length, "0")
                    );
                }
            }
            return fmt;
        },

        setSessionStorage() {
            window.sessionStorage.setItem("group", this.queryInfo.group);
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
                query: {
                    day: JSON.stringify(this.yearData),
                },
            });
        },
    },
};
</script>


<style scoped>
.demands_head {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}
.demands_content {
    margin-top: 20px;
    position: relative;
    padding-right: 242px;
}
.demands_r {
    width: 231px;
    border-radius: 6px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 68px;
    border: 1px solid #ebebeb;
}
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.remark_hover .icon_btn {
    display: none;
}
.remark_hover:hover .icon_btn {
    display: flex;
    margin-left: 5px;
}
.fenpei_icon {
    margin-right: 3px;
    margin-top: -4px;
    position: relative;
    top: 1px;
}
.dm_count {
    margin-top: 20px;
}
.dm_item {
    width: 153px;
    height: 75px;
    box-sizing: border-box;
    padding: 12px 10px 0 20px;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 4px;
    margin-right: 12px;
}
.dm_text {
    font-size: 12px;
    margin-left: 8px;
    color: #616c85;
}
.dm_num {
    font-family: D-DIN;
    font-weight: 700;
    color: #17233d;
    font-size: 20px;
    line-height: 26px;
    margin-top: 8px;
}
</style>

